<template>
  <div id="detailsContent" class="detailsContent">
    <div class="detailsCenter">
      <el-row>
        <div class="commodity-wrap">
          <el-col :span="10" class="commodity-left">
            <img
              :src="fistone.skuPic"
              alt
              @mouseover="toggleShow(fistone.id,1)"
              @mouseout="toggleShow()"
            >
          </el-col>
          <el-col :span="7" class="commodity-right">
            <div class="commodity-right-cen" v-if="fistone.id">
              <div class="commodity-right-name">
                <span>{{fistone.skuName}}</span>
              </div>
              <div class="commodity-right-describe">
                <span>{{fistone.shopName}}</span>
              </div>
              <div class="commodity-right-img">
                <img :src="fistone.skuPic" alt>
              </div>
              <div class="commodity-right-sum">
                <div class="price-ruling">
                  <p class="price-pl">
                    原价:
                    <span>￥{{fistone.sellPrice}}</span>
                  </p>
                  <p class="ruling-pl">
                    现价:
                    <span>￥{{fistone.actGoodsSkuOut.goodsPromotionRules.actAmount}}</span>
                  </p>
                </div>
                <button>单独购买</button>
              </div>
            </div>
          </el-col>
          
          <el-col :span="7" v-if="false">
            <div id="fistcode"></div>
          </el-col>
        </div>
      </el-row>

      <div class="more" v-if="commodity.length>0">
        <div
          class="more-goods"
          v-for="(item,index) in commodity"
          :key="index"
          @mouseover="toggleShow(item.id)"
          @mouseout="toggleShow()"
        >
          <div class="more-goods-top">
            <div id="qrcode" class="more-rodds-xf" v-if="item.id == isShowInd"></div>
            <img :src="item.skuPic" alt>
          </div>
          <div class="more-goods-name">
            <p>{{item.skuName}}</p>
          </div>
          <div class="businessName">
            <P>
              掌柜:
              <span>{{item.shopName?item.shopName:item.brandName}}</span>
            </P>
          </div>
          <div class="more-goods-buy">
            <div class="price">
              <p>
                原价:
                <span>￥{{item.sellPrice}}</span>
              </p>
              <p v-if="item.actGoodsSkuOut.goodsPromotionRules.actAmount">
                现价:
                <span>￥{{item.actGoodsSkuOut.goodsPromotionRules.actAmount}}</span>
              </p>
            </div>
            <router-link to="/storeinformation">
              <button>单独购买</button>
            </router-link>
          </div>
        </div>
        <!-- 最后更过二维码 -->
        <div class="more-goods">
          <div class="more-yH">
            <p>更多优惠</p>
          </div>
          <div class="more-img">
            <img src="../../../../static/images/Accounts.jpg" alt="#">
          </div>
          <div class="more-yH">
            <p>尽在享7购小程序</p>
          </div>
        </div>
      </div>
      <div class="pagein" v-if="total">
        <el-pagination
          background
          layout="prev, pager, next"
          :page-size="30"
          :total="total"
          @current-change="handleCurrentChange"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "detailsContent",
  data() {
    return {
      fistone: {},
      commodity: [],
      isShowInd: "",
      total: "",
      page: 1
    };
  },
  watch: {
    navInd: function() {
      this.page = 1;
      this.total = "";
      var box = document.getElementById("fistcode");
      this.getdishDAta();
    }
  },
  props: {
    // 接受父组件的值
    navInd: Number,
    required: true
  },
  methods: {
    handleCurrentChange(val) {
      this.page = val;
      this.getdishDAta();
    },
    toggleShow(val, val1) {
      let arr = [],
        _Obj = {},
        type = "";
      this.isShowInd = val;
      console.log('isShowInd:',this.isShowInd)
      arr = this.commodity;
      if (this.navInd == 43) {
        type = 7;
      } else if (this.navInd == 41) {
        type = 2;
      } else if (this.navInd == 44) {
        type = 4;
      }

      if (val1 == 1) {
        _Obj = this.fistone;
      } else {
        for (let i in arr) {
          if (val == arr[i].id) {
            _Obj = arr[i];
          }
        }
      }
      console.log("_obj:", _Obj);
      if (_Obj.id) {
        let _Url =
          "https://www.xiang7.net/service?flag=" +
          type +
          "&id=" +
          _Obj.id +
          "&shopId=" +
          _Obj.actGoodsSkuOut.shopId +
          "&categoryId=" +
          _Obj.categoryId +
          "&actId=" +
          _Obj.actGoodsSkuOut.actId;
        if (val1 == 1) {
          $("#fistcode").qrcode(_Url);
        } else {
          $("#qrcode").qrcode(_Url);
        }
      }
    },
    getdishDAta(val) {
      let _this = this,
        _val = val ? val : this.navInd,
        _value = "";
      _value = "page=" + this.page + "&rows=30&actId=" + _val;
      this.$axios
        .get("/api/website/goodsSku/approve/listForAct?" + _value)
        .then(res => {
          if (res.data.code == 0) {
            console.log(res);
            _this.fistone = {};
            _this.commodity = [];
            window.scrollTo(0, 0);
            let _list = res.data.data.list;
            if (_list.length > 0) {
              _this.fistone = _list[0];
              _this.commodity = _list.slice(1);
            }
            _this.total = res.data.data.total;
          }
        })
        .catch(err => {
          console.log("err:", err);
        });
    }
  },
  created() {
    let val = this.navInd ? this.navInd : 41;
    this.getdishDAta(val);
  }
};
</script>

<style lang="less" scoped>
.detailsContent {
  width: 100%;
  display: flex;
  justify-content: center;
  .detailsCenter {
    width: 1340px;
    .el-row {
      width: 100%;
      height: 270px;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #f2f2f2;
    }
    .commodity-wrap {
      width: 99%;
      height: 256px;
      background-color: #ffffff;
      display: flex;
      flex-direction: row;
      .el-col-7 {
        overflow: hidden;
      }
      .commodity-left img {
        width: 100%;
        height: 100%;
        cursor: pointer;
      }
      .commodity-right {
        height: 256px;
        border: 1px solid #f6f6f6;
        .commodity-right-cen {
          width: 96%;
          height: 256px;
          margin-left: 4%;
          .commodity-right-name {
            width: 100%;
            height: 56px;
            border-bottom: 1px solid #f6f6f6;
            font-size: 24px;
            line-height: 56px;
            font-family: 600;
          }
          .commodity-right-describe {
            width: 100%;
            height: 56px;
            line-height: 56px;
            border-bottom: 1px solid #f6f6f6;
            font-size: 15px;
            color: #46586a;
          }
          .commodity-right-img {
            width: 100%;
            height: 80px;
            line-height: 80px;
            border-bottom: 1px solid #f6f6f6;
            img {
              width: 44px;
              height: 44px;
              border-radius: 50%;
            }
          }
          .commodity-right-sum {
            width: 100%;
            display: flex;
            flex-direction: row;
            button {
              width: 90px;
              height: 40px;
              font-size: 16px;
              line-height: 40px;
              border-top-left-radius: 8px;
              border-top-right-radius: 8px;
              border-bottom-left-radius: 8px;
              border-bottom-right-radius: 8px;
              margin: 10px 0px 0px 100px;
              background-color: #e6382f;
              color: #ffffff;
              letter-spacing: 1px;
              cursor: pointer;
            }
            .price-ruling {
              font-size: 16px;
              p {
                padding-top: 8px;
              }
              .price-pl span {
                text-decoration: line-through;
              }
            }
            .price-pl {
              color: #dddddd;
            }
            .ruling-pl {
              color: #e6382f;
              font-weight: 600;
            }
          }
        }
      }
    }
    .more {
      width: 100%;
      margin-top: 24px;
      .more-goods:last-child {
        margin-right: 0px;
      }
      .more-goods:nth-child(5n + 5) {
        margin-right: 0px;
      }
      .more-goods {
        width: 256px;
        background-color: white;
        float: left;
        margin: 0px 10px 10px 0px;
        border: 1px solid #f2f2f2;
        position: relative;
        cursor: pointer;
        .more-goods-top {
          overflow: hidden;
          width: 100%;
          height: 256px;
          display: flex;
          justify-content: center;
          align-items: center;
          background-color: #f2f2f2;
          .more-rodds-xf {
            display: none;
            width: 100%;
            height: 256px;
            position: absolute;
            top: 0px;
            left: 0px;
            overflow: hidden;
          }
          img,
          canvas {
            width: 100%;
            height: 100%;
          }
        }
        .more-goods-name {
          color: #686868;
          line-height: 22px;
          padding: 10px 10px;
          height: 30px;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          margin-bottom: 9px;
          p {
            font-size: 13px;
          }
        }
        .businessName {
          width: 232px;
          height: 20px;
          background-color: #ffb1b1;
          font-size: 12px;
          color: #ffffff;
          line-height: 20px;
          p {
            padding: 0px 4px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
          }
          span {
            font-size: 12px;
            letter-spacing: 1px;
          }
        }
        .more-goods-buy {
          width: 100%;
          display: flex;
          justify-content: space-around;
          align-items: center;
          div {
            line-height: 24px;
          }
          .price p:nth-child(1) {
            color: #cbcbcb;
            span {
              text-decoration: line-through;
            }
          }
          .price p:nth-child(2) {
            color: #e6382f;
          }
          button {
            background-color: #e6382f;
            width: 86px;
            height: 30px;
            font-size: 16px;
            line-height: 30px;
            border-top-left-radius: 18px;
            border-top-right-radius: 18px;
            border-bottom-left-radius: 18px;
            border-bottom-right-radius: 18px;
            letter-spacing: 1px;
            cursor: pointer;
            color: #ffffff;
          }
        }
      }
      .more-goods:hover .more-rodds-xf {
        display: block;
      }
      .more-yH {
        width: 100%;
        height: 72px;
        display: flex;
        justify-content: center;
        align-items: center;
        p {
          font-size: 18px;
          color: #cbcbcb;
          letter-spacing: 1px;
        }
      }
      .more-img {
        width: 100%;
        height: 216px;
        img {
          width: 220px;
          height: 216px;
        }
      }
    }
    .pagein {
      width: 100%;
      float: right;
      padding: 10px;
      .el-pagination {
        float: right;
      }
    }
  }
}
</style>


